import { Form, FormItem, Input, Modal, Select } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import styles from './priceDialog.module.css'

export default defineComponent({
  name: 'PriceDialog',
  setup() {
    const showDialog = ref(false)
    function openDialog() {
      showDialog.value = true
    }
    return {
      showDialog,
      openDialog
    }
  },
  render() {
    return (
      <Modal v-model:visible={this.showDialog} width={600} title={'设置价格'}>
        <div class={styles.priceView}>
          <span class={styles.title}>第三方售价：</span>
          <span class={styles.discount}>￥30</span>
          <span class={styles.price}>50</span>
        </div>
        <Form labelCol={{ span: 3 }} style={{ marginTop: '15px' }}>
          <FormItem label={'商品售价'} name={''}>
            <Input placeholder={'请输入'} style={{ width: '300px' }} />
            <span style={{ marginLeft: '10px' }}>元</span>
          </FormItem>
          <FormItem label={'金豆'} name={''}>
            <Input placeholder={'请输入'} style={{ width: '300px' }} />
          </FormItem>
          <FormItem label={'商品分类'} name={''}>
            <Select
              showSearch={true}
              placeholder={'请选择一级分类'}
              style={{ width: '150px' }}
            />
            <Select
              showSearch={true}
              placeholder={'请选择二级分类'}
              style={{ marginLeft: '10px', width: '150px' }}
            />
          </FormItem>
        </Form>
      </Modal>
    )
  }
})
